<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>动态详情</title>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/swiper.min.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/base.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/post.css" />
  <style>
     
  .fixed-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      background: white;
      box-shadow: 0 -0.02rem 0.1rem 0 rgba(222, 228, 234, 0.8);
      padding: 0 15px;
    }

    .fixed-bottom img {
      width: 34px;
      height: 34px;
    }

    .fixed-bottom .info1 {
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 34px;
      margin-left: 10px;
    }

    .info1 .info-top {
      color: #3B3B3B;
      font-size: 13px;
    }

    .info1 .info-bottom {
      color: #989898;
      font-size: 11px;
    }

    .btn-download {
      width: 70px;
      height: 29px;
      text-align: center;
      line-height: 29px;
      background: #F96B47;
      border-radius: 14.5px;
      color: #FFFFFF;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <template>
      <div class="article">
        <div class="center">
          <div class="tou_left">
            <img :src=info.user_image onerror="this.src='/static/admin/jingtaiwu/logo1.png'" class="tou">
            <div class="city_name" v-if="info.user_city_man==2">
                <img src="/static/admin/jingtaiwu/city_bg.png" class="city_bg">
                <span class="city_bg_con1">城主</span>
            </div>
            <div v-else>
                    <div class="city_name" v-if="info.user_level==2">
                        <img src="/static/admin/jingtaiwu/city_bg.png" class="city_bg">
                        <span class="city_bg_con">城市合伙人</span>
                    </div>
                    <div class="city_name" v-else-if="info.user_level==3">
                            <img src="/static/admin/jingtaiwu/city_bg.png" class="city_bg">
                            <span class="city_bg_con">事业合伙人</span>
                        </div>
                        <div class="city_name" v-else-if="info.user_level==4">
                                <img src="/static/admin/jingtaiwu/city_bg.png" class="city_bg">
                                <span class="city_bg_con">推广合伙人</span>
                            </div>
                    <div class="city_name" v-else-if="info.user_level==1&&info.user_level2==2"
                        click.stop="goStore(info.user_shop_id)">
                        <img src="/static/admin/jingtaiwu/city_bg.png" class="city_bg">
                        <span class="city_bg_con1">店主</span>
                    </div>
            </div>
            
          </div>
          <div class="info_right">
            <div style="color:#333333;font-size:0.7rem;font-weight: bold">{{info.user_username}}</div>
            <div style="color:#666666;font-size: 0.55rem;margin-bottom: 0.45rem">{{info.post_add_time}}&nbsp;&nbsp;
              <span v-if='info.shop_name' style="color:#FF5E00">来自:{{info.shop_name}}</span>
            </div>
          </div>
        </div>
        <div class="article_con" v-if='info.post_type==1'>
          <div style="margin-bottom:0.4rem;" v-html="info.post_content">

          </div>
          <div class="goods_pic1" v-if="info.post_link&&info.post_link.split(',').length<=2">
            <img :src=item1 @click.stop="openPic(item1)" v-if="info.post_link.split(',').length==2"
              v-for="item1,index in info.post_link.split(',')" style="width:49.5%;height: 8.15rem;object-fit: cover">
            <img :src=item1 @click.stop="openPic(item1)" v-if="info.post_link.split(',').length==1"
              v-for="item1,index in info.post_link.split(',')" style="width:10rem;height: 10rem;object-fit: cover;">
          </div>
          <div class="goods_pic" v-if="info.post_link&&info.post_link.split(',').length>2">
            <div v-if="info.post_link.split(',').length===4" style="display:flex;flex-wrap: wrap">
              <img :src=item2 @click.stop="openPic(item2)"
                v-for="item2,index in info.post_link.split(',')"
                style="width:8rem;height:8rem;margin-bottom:0.3rem;margin-left:0.15rem;object-fit: cover;">
            </div>
            <div v-else style="display:flex;flex-wrap: wrap">
              <img :src=item2 @click.stop="openPic(item2)"
                v-for="item2,index in info.post_link.split(',')"
                style="width:5.3rem;height:5.3rem;margin-bottom:0.3rem;margin-left:0.15rem;object-fit: cover;">
            </div>
          </div>
        </div>
        <div class="article_con" v-if='info.post_type==2'>
          <div style="margin-bottom:0.4rem;" v-html="info.post_content">

          </div>
          <div class="goods_pic">
            <div class="pic_can">
              <video :src="info.post_link" class="vedio" id="vedio" :poster="info.post_link | videoCover"></video>
              <img @click.stop="openVideo()" src="/static/admin/jingtaiwu/play.png" class="play" v-show="show">
            </div>
          </div>
        </div>
        <div class="article_con" v-if='info.post_type==3'>
          <div style="margin-bottom:0.4rem;" v-html="info.post_content">

          </div>
        </div>
        <div class="hr1"></div>
        <div class="bottom">
          <div class="lun" click.stop="sharePost(info)">
            <img src="/static/admin/jingtaiwu/zhuan.png" style="width:0.75rem;height: 0.7rem;margin-right: 0.4rem">
            <span>{{info.post_share}}</span>
          </div>
          <div v-if='isShowShang' class="lun" click.stop="praise(info.post_user_id,post_id,info.user_image,info.user_username)">
            <img src="/static/admin/jingtaiwu/shang1.png" v-if="info.is_give"
              style="width:0.7rem;height: 0.7rem;margin-right: 0.4rem">
            <img src="/static/admin/jingtaiwu/shan.png" v-else style="width:0.7rem;height: 0.7rem;margin-right: 0.4rem">
            <span v-if="info.is_give" style="color:#FF5E00">{{info.post_give}}</span>
            <span v-else>{{info.post_give}}</span>
          </div>
          <div class="lun" _click='commentPost(info.post_id,1,info.post_user_id)'>
            <img src="/static/admin/jingtaiwu/wen.png" style="width:0.75rem;height:0.65rem;margin-right: 0.4rem">
            <span>{{info.post_comment}}</span>
          </div>
          <div class="lun" click.stop="likePost(info)">
            <img src="/static/admin/jingtaiwu/zan2.png" v-if="info.is_like"
              style="width:0.65rem;height:0.7rem;margin-right: 0.4rem">
            <img src="/static/admin/jingtaiwu/zna.png" v-else style="width:0.65rem;height:0.7rem;margin-right: 0.4rem">
            <span v-if="info.is_like" style="color:#FF5E00">{{info.post_praise}}</span>
            <span v-else>{{info.post_praise}}</span>
          </div>
        </div>
        <div class="hr"></div>
        <div class="allLun">
          全部评论
        </div>
        <div class="hr1"></div>
        <div
          style="display:flex;margin-top: 0.6rem;margin-bottom: 1rem; padding-left: 0.75rem; padding-right: 0.75rem;width: 100%;"
          v-for='item in list'>
          <img :src=item.user_image style="width:2rem;height:2rem;border-radius:50%;margin-right: 0.4rem"
            onerror="this.src='/static/admin/jingtaiwu/logo1.png'">
          <div style="display:flex;justify-content: space-between;width: 100%">
            <div class="hui">
              <div style="display:flex;align-items: center;justify-content: space-between;width: 100%">
                <div style="font-size:0.7rem;color:#333;font-weight:bold;margin-bottom: 0.2rem">{{item.user_name}}</div>
              </div>
              <div style="color:#999999;font-size:0.6rem;margin-bottom: 0.6rem">{{item.comment_time}}</div>
              <div style="font-size:0.7rem;color: #333" v-if='item.comment_type==1'>{{item.comment_content}}</div>
              <div style="font-size:0.7rem;color: #333" v-if='item.comment_type==2'>回复<span
                  style="color:#F96B47">{{item.reply_user_name}}</span><span>:{{item.comment_content}}</span></div>
            </div>
            <img src="/static/admin/jingtaiwu/wen.png" style="width:0.75rem;height:0.65rem;"
              _click='commentPost(post_id,2,item.comment_user_id)'>
          </div>
        </div>
    </template>
    <div class="fixed-bottom">
      <img src="https://jintianjifen.oss-cn-shanghai.aliyuncs.com/f53953806ed6e7296fc76890aff4b7c9.jpg" alt="">
      <div class="info1">
        <div class="info-top">支分宝</div>
        <div class="info-bottom">支分宝享品质生活</div>
      </div>
      <div class="btn-download" onclick="tz()">立即下载</div>
    </div>
  </div>
</body>
<script type="text/javascript" src="/static/admin/jingtaiwu/api.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/utils.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script src="/static/admin/jingtaiwu/vue-extend.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/common1.js"></script>
<script>
  var vm;

  window.onload = function () {
    vm = new Vue({
      el: '#app',
      data: {
        info: {},
        list: [],
        post_id: getQueryVariable('post_id'),
        show:true,
        isShowShang: false,
      },
      methods: {
        // 初始化
        initData: function () {
          var _this = this;
          var data = {
            values: {
              post_id: this.post_id,
            }
          };
          postAjax(ApiUrl.apiuserpostDetail, data, function (res, err) {
            if (res.status == 200) {
              _this.info = res.msg;
              try {
                var date = new Date(_this.info.post_add_time.replace(/-/g, '/'));

                M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                _this.info.post_add_time = M + D
              }catch(e) {

              }
            }
          });
        },
        // 评论列表
        getComment: function () {
          var _this = this;
          var params = {
            values: {
              user_id: 13,
              post_id: this.post_id,
              page: 1
            }
          };
          postAjax(ApiUrl.apiusergetComment, params, function (res, err) {
            if (res.status == 200) {
              _this.list = res.msg;
            } else {

            }
          });

        },
        // 视频播放
        openVideo: function () {
          //赋值
          // $("#vedio").attr("src", src);
          document.getElementById("vedio").play();
          this.show=false
          document.getElementById("vedio").onended=function(){ vm.show=true};
          
        },
        end:function(){
            alert(123)
        },
        // 打开图片
        // openPic: function (img, index) {
        //   openBrowserView(img.split(','), index);
        //   window.open(img.split(','))
        // },
        openPic: function (img) {
          window.open(img)
        },
      },
      mounted: function () {
        this.initData();
        this.getComment();
      }
    });
  };
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/wei/id414478124';
        } else {
          window.close();
        }
      }, 300);
    } else {
      window.setTimeout(function () {
        window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.kingsuper.jifenuser';
      }, 300);
    }
  }
</script>

</html>